import Vue from 'vue'
import { Image } from 'element-ui'
const ImageViewerMain = Image.components.ImageViewer
const ImageViewerConstructor = Vue.extend(ImageViewerMain)
let instance

/**
 *
 * @param {*} urlList
 * @param {*} options { zIndex, onSwitch, onClose, initialIndex }
 */
const ImageViewer = function(urlList, options) {
  options = options || {}
  const userOnClose = options.onClose
  options.onClose = function() {
    ImageViewer.close(userOnClose)
  }
  options.urlList = urlList
  instance = new ImageViewerConstructor({
    // props 是定义
    // propsData 是传递的Data
    propsData: options
  })
  instance.$mount()
  document.body.appendChild(instance.$el)
  return instance
}

ImageViewer.close = function(userOnClose) {
  document.body.removeChild(instance.$el)
  if (typeof userOnClose === 'function') {
    userOnClose(instance)
  }
  instance = null
}

export default ImageViewer
